<style>
.pure_form_extra { background: #fff; padding: 5px; border: 1px solid #aaa; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, .3); }
.pure_form_extra textarea { width: 350px; height: 300px; }
.pure_form_extra .mandatory { color: #ff0000; padding-left: 5px; }
.pure_form_extra * { font-size: 12px !important; font-family: Trebuchet MS !important; }
table.lo { width: 100%; }
table.lo td { vertical-align: top; text-align: left; }
table.lo td.left { width: 250px; }
table.lo td.right { width: 700px; padding-left: 12px; }
.boxgrid { width: 160px; height: 200px; margin:0 10px 10px 0; float:left; background:#fff; text-align: center; border: 1px solid #ddd; box-shadow: 0 0 5px rgba(0, 0, 0, .3); position: relative; overflow: hidden; }
.boxgrid img { width: 80%; height: 80px; margin: 3px 0; }
.boxgrid .gdbg {
  background: rgb(255,255,255); /* Old browsers */
  background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* IE10+ */
  background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
.boxgrid p.title {
  font-size: 12px; 
  padding: 3px 0;
  font-family: Lucida Console;
  font-weight: bold;
}
.boxgrid .info {
  width: 100%; 
  padding: 0 5px; 
  font-size: 12px  !important; 
  font-family: Trebuchet MS !important; 
  font-weight: normal !important; 
  color: #666;
}
.boxgrid p.brief { color: #fff; font-size: 12px; font-family: Trebuchet MS; }
.boxgrid button { position: absolute; bottom: 40px; left: 20%; }
.boxcaption{ float: left; position: absolute; top: 220px; left: 0; background: #000;  width: 95%; height: 195px; padding: 10px; text-align: left; opacity: .8; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
.boxgrid .market {
  color: #aaa;
  text-decoration:line-through;
  font-size: 11px;
}
.boxgrid .save {
  color: #ff0000;
}
.boxgrid .sold {
  font-weight: bold !important; 
}
</style>

<?php 
$currs = $orm->get('pb_ecom_currency', 't.title', 'ASC', NULL, NULL, NULL)->d;
$user = null;
if (isset($_SESSION['user'])) {
  $user = json_decode($_SESSION['user']);
}

include dirname(__FILE__) . '/index.srv.php';
$cat = Utils::get_param('cat', 0);
$search = Utils::get_param('search', '');
$pg = Utils::get_param('pg', 1);

$categories = $orm->get('pb_ecom_category', NULL, NULL, NULL, NULL, NULL)->d;

$root = new stdClass();
$root->id = 0;
$root->name = 'ROOT';
$root->parent_id = -1;
Server::__create_root($categories, $root);

$rslt = new stdClass();
$rslt->data = array();
Server::__get_all($root, $cat, $rslt, false);


$opts = new stdClass(); 
$opts->cd = 't.status = 1 AND t.name LIKE :v0';
$opts->cdv = array(':v0' => '%' . $search . '%');
if ($cat != 0) {
  $opts->cd .= ' AND (';
  foreach ($rslt->data as $idx => &$itm) {
    $opts->cd .= "t.category_id = :v" . ($idx + 1);
    $opts->cdv[":v" . ($idx + 1)] = "$itm";
    if ($idx < count($rslt->data)  -1) {
      $opts->cd .= ' OR ';
    }
  }
  $opts->cd .= ')';
}

$opts->sel = 't.id, t.track_id, t.name, t.price, t.curr, t.brief, t.enabled_member, t.sold__';
$data = $orm->get('pb_ecom_product', NULL, NULL, $pg, CAT_PNUM, $opts);
foreach ($data->d as $itm) {
  $itm->__img = PLGN_DIR . basename(dirname(__FILE__)) . '/no_image.gif';
  $opts = new stdClass(); 
  $opts->cd = 't.product_track_id = :v1 AND t.is_default = :v2';
  $opts->cdv = array(':v1' => $itm->track_id, ':v2' => 1);
  $rslt = $orm->get('pb_ecom_product_img', NULL, NULL, NULL, NULL, $opts)->d;
  if (count($rslt) > 0) {
    $itm->__img = $rslt[0]->file;
  }
}
?>

<table class="lo" cellPadding="0" cellSpacing="0">
  <tr>
    <td class="left">
      <div id="categories" class="pure-form pure-form-aligned pure_form_extra"></div>
    </td>
    <td class="right">
      <div id="products"></div>
      <div style="clear: both;">&nbsp;</div>
      <div id="pagination"></div>
      
    </td>
  </tr>
</table>
<div>&nbsp;</div>

<script type="text/javascript">
  /*<![CDATA[*/
  var __requrl = '<?php echo Utils::get_requrl($app_data); ?>';
  var __id = '<?php echo $app_data->param_id; ?>';
  var __sys = '<?php echo addslashes($app_data->sys->php_name); ?>';
  var __dir = '<?php echo PLGN_DIR . basename(dirname(__FILE__)); ?>';
  var __redmd = '<?php echo addslashes($app_data->sys->redmd); ?>';
  var __cat = '<?php echo addslashes($cat); ?>';
  var __search = '<?php echo addslashes($search); ?>';
  var __user = JSON.parse('<?php echo addslashes(json_encode($user)); ?>');
  var __currs = JSON.parse('<?php echo addslashes(json_encode($currs)); ?>');
  var __categories = JSON.parse('<?php echo addslashes(json_encode($categories)); ?>');
  var __categories_root;
  var __data = JSON.parse('<?php echo addslashes(json_encode($data)); ?>');
  var __curr;
  var __mkt_prc_rt = '<?php echo MKT_PRC_RT; ?>';
  
  $(function(){
    Utils.init_ecomm();
    
    __categories = __categories.sort(function(a, b) {
      return parseFloat(a.order, 10) > parseFloat(b.order, 10);
    });
    __categories_root = Utils.get_root(__categories);
    __categories_root.name = '全部分类'
    render();
  });


  function render() {
    Url.insert_param('cat', __cat);
    Url.insert_param('search', __search);
    Url.insert_param('pg', __data.p);
    
    if (__data.d.length > 0) {
      $('#pagination').pagination({
        items: __data.t,
        itemsOnPage: __data.s,
        currentPage: __data.p,
        cssStyle: 'compact-theme',
        onPageClick: function(pageNumber, event) {
          return Url.redirect(__redmd, __sys + '.php?i=' + __id + '&pg=' + pageNumber + '&cat=' + __cat + '&search=' + __search);
        }
      });
    } else {
      $('#pagination').empty();
    }
    $('#categories').empty();
    $('#categories').append('<ul id="tree"></ul>');
    render_categories(__categories_root, $('#tree'));
    $("#tree").niceTree({
      animation: 'bounce',
      animSpeed: 'fast',
      allowMultiple: true,
      color: 'blue',
      ellipsis: true,
      highlightNoMenu: true,
      useCookies: false
    });
    render_data();
  };

  function render_categories(node, elm) {
    elm.append('<li class="nt_open" onclick="return false;">' +
                  '<a href="#"' + ((__cat == node.id) ? ' class="cs_cat_hi"' : '') + ' onclick="return get_products(' + node.id + ');">' + node.name + '</a>' +
                  ((node.__c.length > 0) ? '<ul id="pgul_' + node.id + '"></ul>' : '') + 
               '</li>');
    
    for (var idx in node.__c) {
      var itm = node.__c[idx];
      render_categories(itm, $('#pgul_' + node.id));
    }
  };

  function render_data() {
    $('#products').empty();
    for (var idx in __data.d) {
      var itm = __data.d[idx];
      itm.__op = Utils.get_price(__currs, itm.curr, __curr.title, itm.price, null);
      itm.__fp = Utils.get_price(__currs, __curr.title, __curr.title, itm.__op, itm.enabled_member == 1 ? (__user ? __user.__discount : null) : null);
      $('#products').append(
        '<div class="boxgrid caption">' +
          '<p class="title gdbg">' + itm.name + '</p>' +
          '<img class="ea_pd" src="' + itm.__img + '"/>' +
          '<table class="info gdbg">' +
            '<tr>' +
              '<td>当前价</td>' +
              '<td>' + accounting.formatMoney(itm.__fp, __curr.dollar_symbol) + '</td>' +
            '</tr>' +
            '<tr class="market">' +
              '<td>市场价</td>' +
              '<td>' + accounting.formatMoney(itm.__op * __mkt_prc_rt, __curr.dollar_symbol) + '</td>' +
            '</tr>' +
            '<tr class="save">' +
              '<td>节省</td>' +
              '<td>' + accounting.formatMoney(itm.__op * __mkt_prc_rt - itm.__fp, __curr.dollar_symbol) + '</td>' +
            '</tr>' +
            '<tr>' +
              '<td>累计销售</td>' +
              '<td class="sold">' + itm.sold__ + '件</td>' +
            '</tr>' +
          '</table>' +
          
          '<div class="cover boxcaption">' +
            '<p class="brief">' + Utils.get_short(itm.brief, 90) + '<button class="cs_btn_cart" href="#" style="z-index: 999; opacity: 1;" onclick="window.open(\'<?php echo URL . HOME_DIR . $app_data->sys->php_name . '.php?i=' . ECOM_ID . '&id='; ?>' + itm.id + '\')">查看</button></p>' +
          '</div>' +
        '</div>'
      );
      
    }
    $('.boxgrid.caption').hover(function(){
      $(".cover", this).stop().animate({top:'0'},{ queue: false, duration: 160 });
    }, function() {
      $(".cover", this).stop().animate({top:'220px'},{ queue: false, duration:160 });
    });

  };
  
  function get_products(cat) {
    __cat = cat;
    __search = '';
    var req = {
      cat: __cat,
      search: __search,
      pg: 1
    };
    Ajax.request(
      __requrl + 'get_objs',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        __data = rslt;
        render();
      },
      null
    );
  };
  /*]]>*/
</script>